Hexo blog construction record

Just record some adjusted parameters etc.

关于github搭建hexo博客的教程很多，随便列几个

关于搭建

下载安装node.js
blog目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不要用Windows自带的控制台了。
定位到该目录下，输入npm i hexo-cli -g安装Hexo。会有几个报错，无视它就行。
安装完后输入hexo -v验证是否安装成功。
然后就要初始化我们的网站，输入hexo init初始化文件夹，接着输入npm install安装必备的组件。
这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦，效果如下：
https://www.jianshu.com/p/9f04ee6371ce

https://www.jianshu.com/p/1c888a6b8297?utm_source=oschina-app

https://www.cnblogs.com/liziczh/p/9318656.html

改变字体页边距

https://www.jianshu.com/p/02fbd409988c

https://blog.csdn.net/weixin_42024255/article/details/82814433

主题更改以及小功能的添加

https://www.jianshu.com/p/c9de55660d1b

修改字体

通常来讲，Next主题控制字体大小的文件是在主题文件夹中的 source\css_variables 目录下的 base.styl 文件。我的完整路径是：D:\hexo\themes\next\source\css_variables

接下来就是改成你想要的字体大小了，用编辑器打开 base.styl 文件，找到如下代码然后修改即可：

 // Font size
$font-size-base           = 16px    //修改以前是14，我改成了16
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

// Headings font size
$font-size-headings-step    = 2px
$font-size-headings-base    = 24px  //这个是标题大小，如果你觉得不满意，可以改的更大一点

改页边距

修改文件：source/css/_schemes/Picses/_layout.styl

header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

修改背景样式

打开文档下themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

url可更换为自己喜欢的图片的地址。

repeat：是否重复出现

attachment：定义背景图片随滚动轴的移动方式

position：设置背景图像的起始位置。

---

2020-10-14更新

Ayer使用

next还是给有时间比较懂的大佬们，我撤了~
发现一个配置比较简单也比较美化的样式-Ayer Ayer中文说明

Pro1. categories显示空白页

我的原因是没有添加layout
解决方法：
在·source\categories\index.md·里配置

title: categories
date: 2018-08-25 14:07:00
type: "categories"
layout: "categories"

Pro2. Hightlight无法显示latex高亮

解决办法：换成prism.
使用了hexo-prism-plugin的插件来做高亮。

npm i -S hexo-prism-plugin

之后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    
  theme: 'duotone-sea'
  line_number: false    
  custom_css:
博客部署

Pro3. updated time

reference: Hexo 博客 Hiker 主题增加文章最后编辑时间，并按照最后编辑时间排序

Ayer主题的配置完全按照reference里介绍的来配置没有问题。但是他所说的Atom我还暂时未尝试，所以用的是比较麻烦的方法，用在线时间戳生成：UNIX时间戳转换

Pro4. 为什么渲染后的页面还会出现“#”

标题 markdown语法 “##”关键字创建的标题,为什么渲染后的页面还会出现“#”
解决方法：用html语法<h1></h1>类似的添加标题

添加Valine评论系统

Reference:
https://zhengyujie.github.io/2019/08/18/valine%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/

https://wanxiaoyy.github.io/2018/11/13/%E4%B8%BA%E4%BD%A0%E7%9A%84Hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0Valine%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/

• 注册LeanCloud & 获取KEY

Use CDN：jsDelivr + Github

Reference:https://www.itrhx.com/2019/02/10/A18-free-cdn/

使用方法：https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径